<!-- Main index page for Monopoly's -->
<html>
  <head>
    <title>Monopoly</title>
    <!-- import css stylesheet from ../stylesheets/ -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style_new.css">
  </head>
  <body>
    <!-- Header: contains logo image and name -->
    <div id="header">
      <h1>
        <img src="/images/Monopoly.png" style="float:left" height="65"/>
        Monopoly
        <!-- in case we want to add a motto, etc. -->
        <span>(write anything here?)</span>
      </h1>
    </div>
    <!-- Container contains left and right section for search field and budget field -->
    <div id="container">
      <section id="left">
        <form action="/onSearch" method="get" class="defaultForm">
          Enter A Single Product:<br/>
          <input class="input" id="searchInput"  type="text" name="search" value={{search}}>
          <input type="radio" name="search_type" value="newSrch"/> New Search
          <input type="radio" name="search_type" value="addItm" CHECKED/> Add Item
          <input class="subButton" type="submit" value="Search">
        </form>
      </section>
      <section id="right">
        <div name="budget" id="set">
          <form action="/onSubmit" method="post" class="defaultForm">
            Enter Budget:
            <input class="input" id="budgetInput" type="text" name="budget" value={{budget}}>
            <input type="submit" value="Save" class="subButton" id="saveButton">
          </form>
        </div>
      </section>
    </div>
    <!-- resContainer contains result displays -->
    <div id="resContainer">
      <div id="result" name="Results">
        <div style="width: 65%; margin: 0 auto;">
          <!-- for first page, which is index.html, shows overall instruction of how to use Monopoly's search -->
          <h1><span>Instruction: </span></h1>
          <p>To use this application, Enter a name of a single product in the search form.<br/>You will have a choice of creating new search, or adding a new item.<br/>Hit search. </p><p>Enter a budget you have in mind. Hit save.</p>
          <p>And enjoy choosing items...</p>
        </div> 
      </div>
    </div>
    <!-- footer contains disclaimer about the InvisibleHand's API -->
    <div id="footer">
      Disclaimer: We are using the InvisibleHand's API. Please read the <a href="https://developer.getinvisiblehand.com/termsofservice">InvisibleHand API's Terms of Service</a>.
    </div>
  </body>
</html>